<template>
  <div class="container">
    <div class="header">
      <div>
        <router-link to='/index111'>
          <label>〈</label>
        </router-link>
      </div>
      <div><span>患者管理</span></div>
      <div><button @click="dialogVisible = true">新增患者</button></div>
    </div>
    <div class="context">
      <ul>
        <li>
          <div class="li">
            <div><span class="blue font">林明霞</span><span>&nbsp;女</span></div>
            <div>
              <span class="font">12345678910</span>
              <span>**余额</span>
              <span class="font">0</span>
              <span>其他余额</span>
              <span class="font">90</span>&nbsp;&nbsp;
              <el-button type="danger">删除</el-button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <el-dialog
      title="新增患者"
      width="85%"
      :visible.sync="dialogVisible"
      :direction="direction"
      :before-close="handleClose">
      <div class="dialogs">
        <div>
          <span>患者姓名</span><el-input class="d_input" v-model="name" placeholder="请输入姓名"></el-input>
        </div>
        <div>
          <span>患者性别</span><el-input class="d_input" v-model="sex" placeholder="请输入性别"></el-input>
        </div>
        <div>
          <span>电话号码</span><el-input class="d_input" v-model="phone" placeholder="请输入电话号码"></el-input>
        </div>
        <div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'manage',
    data() {
      return {
        name:'',
        sex:'',
        phone:'',
        dialogVisible: false,
        direction: 'ttb',
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .header {
    width: 100%;
    height: 36px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: center;
    background-color: #00afff;
    color: white;
  }

  .header div {
    width: 20%;
    margin-top: auto;
    margin-bottom: auto;
  }
  .header div button{
    border: none;
    background-color: #00afff;
    color: white;
  }
  .context {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
  }

  .context  ul {
    list-style-type: none;
    margin-top: 12px;
    margin-left: 5px;
    padding: 0;
  }
  .context  ul .li{
    width: 95%;
    height: 100px;
    border: 1px solid;
    border-color: #00afff;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
  }
  .blue{
    color: #1890ff;
  }
  .font{
    font-size: 18px;
    font-weight: bold;
  }
  .context  ul .li div {
    margin: 5px;
    display: flex;
  }
  .dialogs div{
    display: flex;
    flex-direction: row;
    align-items:center;
    margin-top: 9px;
  }
  .dialogs div .d_input{
    width: 70%;
  }
</style>
